<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">

    function App(props) {
        console.log(props)
        let { list } = props;
        return (
            <div>
                {
                    list.map((item, index) => {
                        // 返回组件 
                        return <HoreItem key={index} item={item}/>
                    })
                }
            </div>
        )
    }

    function HoreItem(props) {
        console.log(props)
        // 解构 
        let {item} = props;
        return (
            <div>
                <img src={`https://game.gtimg.cn/images/lol/act/img/champion/${item.alias}.png`} alt="" />
                <p>{item.title}</p>
            </div>
        )
    }

    // 1. 创建xml实例
    let xhr = new XMLHttpRequest();
    
    xhr.open("get", "https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js");
    xhr.send();
    xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
            let data = JSON.parse(xhr.response);
            console.log(data.hero)
            // 渲染app组件
            ReactDOM.render(<App list={data.hero} />, document.getElementById("root"))
        }
    }
</script>

</html>